<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .box {
        margin: 0 auto;
        width: 200px;
      }

      ul {
        padding-left: 2rem;
      }

      li {
        /* 列表间距 */
        line-height: 3rem;

        /* 符号样式（无） */
        list-style-type: none;

        /* 符号位置 (在标签内) */
        list-style-position: outside;

        /* 符号自定义图片（位置、大小设置上有局限性）*/
        /* list-style-image: url("./icons/1.svg"); */

        /* 预留符号位置 */
        padding-left: 2rem;
        background-image: url("./icons/todo_no.svg");
        background-position: 0 0px;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
        background-position: left;
      }

      /* 鼠标指针经过时（同时进行资源加载） */
      li:hover {
        background-image: url("./icons/todo_yes.svg");
      }
    </style>
  </head>

  <body>
    <div class="box">
      <ul>
        <li>小明</li>
        <li>小红</li>
        <li>小绿</li>
      </ul>
    </div>
  </body>
</html>
